html, body {
    margin: 0;
    padding: 0;
}

body {
    background-size: cover;
    background-color: #0b1220;
    color: #e6e6e6;
    font-family: Verdana, Sans-Serif;
 }

 .title {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
    background-color: #2e384a;
    font-family: Verdana, Sans-Serif;
    font-size: 30px;
    text-align: center;
 }

 .pageselect {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    align-items: center;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-right: 20px;
    background-color: #1f2937;
    font-family: Verdana, Sans-Serif;
    font-size: 14px;
    text-align: right;
 }
 
 .subtitle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 0;
    font-family: Verdana, Sans-Serif;
    font-size: 20px;
    text-align: center;
}

.content {
    margin: 5px;
    padding: 5px;
    font-family: Verdana, Sans-Serif;
    font-size: 16px;
    text-align: left;
}

body a {
    color: #e6e6e6;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease, text-decoration-color 0.15s ease;
}

body a:hover,
body a:focus,
body a:active {
    color: #66c0ff;
    text-decoration: underline;
    text-decoration-color: #66c0ff;
    background-color: #66c0ff1e;
    border-radius: 3px;
}

.algorithm2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
border: 1px solid #e6e6e6;
}

.algorithm {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(1, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
border: 1px solid #e6e6e6;
}

.image2 { 
    grid-area: 1 / 1 / 3 / 2; 
    border: 1px solid #e6e6e6;
    text-align: center;
}
.alg1name { grid-area: 1 / 2 / 2 / 3; 
border: 1px solid #e6e6e6; 
text-align: center;}

.alg1 { grid-area: 1 / 3 / 2 / 3; 
    border: 1px solid #e6e6e6; 
    text-align: center;}

.alg2name { grid-area: 2 / 2 / 3 / 3; 
border: 1px solid #e6e6e6; 
text-align: center;
}

.alg2 { grid-area: 2 / 3 / 3 / 3; 
    text-align: center;
    border: 1px solid #e6e6e6; }

.image { grid-area: 1 / 1 / 2 / 2;  
    border: 1px solid #e6e6e6; 
    text-align: center;
}

.algname { grid-area: 1 / 2 / 2 / 3; 
    border: 1px solid #e6e6e6; 
    text-align: center;
    padding-top: 20%;
}

.alg { grid-area: 1 / 3 / 2 / 3; 
    text-align: center;
    padding-top: 20%;
}

.algorithm3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
border: 1px solid #e6e6e6;
}

.image3 { 
    grid-area: 1 / 1 / 4 / 2; 
    border: 1px solid #e6e6e6;
    text-align: center;
}

.alg3name { grid-area: 3 / 2 / 3 / 3; 
border: 1px solid #e6e6e6; 
text-align: center;}

.alg3 { grid-area: 3 / 3 / 3 / 3; 
    text-align: center;
    border: 1px solid #e6e6e6; }