* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    display: flex;
    font-family: "JetBrains Mono", monospace;
    flex-direction: column;
    min-height: 100vh;
    background: #eeece0;
}

header {
    display: flex;
    background: #eeece0;
    padding: 25px 3rem;
    margin: 0.5px 0.5px 0 0.5px;
    font-weight: bold;
    justify-content: space-between;
    border: solid 3px black;
}

header .acronym{
    font-size: 30px;
    font-weight: 900;
    text-decoration: none;
    color: inherit;
}

header nav{
    display: flex;
    gap: 10px;
    cursor: pointer;
}

header nav a{
    padding: 10px 10px;
    border: 2px solid black;
    font-size: clamp(10px, 4vw, 15px);
    text-decoration: none;
    color: inherit;
}
header nav a:hover{
    background: black;
    color: #eeece0;
}

/*_________________________________Next to container*/

.container{
    position: absolute;
    inset: 100px 0 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    margin: 0 0.5px 0.5px 0.5px;
}

.container-A{
    height: 100%;
    display: flex;
    flex-direction: column;
    border: solid 3px black;
    font-size: clamp(2.5rem, 8vw, 6rem);
    font-weight: 900;
    padding: 3rem 3rem 0 3rem;
    border-top: none;
    border-right: none;
}

.big-name{
    margin: auto 0;
}

.copyright{
    color: #686868;
    font-weight: bold;
    font-size: clamp(8px, 4vw, 13px);
    padding-bottom: 1.5rem;
}

.container-B{
    display: grid;
    height: 100%;
    border: solid 3px black;
    grid-template-rows: repeat(4, auto);
    border-top: none;
    grid-template-areas:
        'row-1'
        'row-2'
        'row-3'
        'row-4';
    overflow-y: auto;
    scroll-behavior: smooth;
}

.card-1{
    grid-area: row-1;
}
.card-2{
    grid-area: row-2;
}
.card-3{
    grid-area: row-3;
}
.card-4{
    grid-area: row-4;
}

.card-1 .image-box,
.card-2 .video-box,
.card-3 .video-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem auto;
    width: 80%;
    text-decoration: none;
    color: inherit;
}

.card-1 .img-wrapper,
.card-2 .video-wrapper,
.card-3 .video-wrapper{
    border: solid 2px black;
    overflow: hidden;
}

.card-1 .image-box img,
.card-2 .video-box video,
.card-3 .video-box video{
    filter: grayscale(100%);
    transition: filter 0.4s ease;
}

.card-1 .image-box:hover img,
.card-2 .video-box:hover video,
.card-3 .video-box:hover video{
    transition: filter 0.4s ease-out;
    transform: scale(1.05);
    filter: grayscale(0%);
    border: solid 2px black;
    cursor: pointer;
}

.card-1 .image-box:hover h1,
.card-2 .video-box:hover h1,
.card-3 .video-box:hover h1{
  color: #d50606;
}

.card-1 img, .card-1 h1{
    display: block;
    width: 100%;
}
.card-1 h1, .card-2 h1, .card-3 h1{
    font-size: clamp(10px,5vw,25px);
    align-self: flex-start;
}

.card-1 p,
.card-2 p,
.card-3 p{
    width: 80%;
    margin: -7px auto 10px auto;
    line-height: 0;
    font-size: clamp(10px, 2vw, 13px);
    color: #686868;
}

.card-2 .video-box video,
.card-3 .video-box video{
    width: 100%;
    display: block;
}
.card-3{
    padding-bottom: 2.5rem;
}

.card-4{
        border-top: solid 2px black;
}

.card-4 .contact-info{
    width: 80%;
    margin: 1rem auto;
    display: grid;
    row-gap: 5px;
    grid-template-columns: repeat(3,max-content);
    grid-template-rows: repeat(2,1fr);
    grid-template-areas:
            'row-1 row-1 row-1'
            'row-2A row-2B row-2C';
}
.contact-info #connect{
    grid-area: row-1;
}
.contact-info #linkedin{
    grid-area: row-2A;
}
.contact-info #outlook{
    grid-area: row-2B;
}
.contact-info #gmail{
    grid-area: row-2C;
}

.contact-info a{
    text-decoration: none;
    color: inherit;
}

.contact-info #linkedin:hover,
.contact-info #outlook:hover,
.contact-info #gmail:hover{
    display: inline-block;
    padding: 5px 5px;
    width: fit-content;
    line-height: 2;
    background: black;
    color: #eeece0;
    overflow: hidden;
    font-weight: bold;
    cursor: pointer;
}

@media (max-width: 640px){
header{
    padding: 15px 1.25rem;
    flex-wrap: wrap;
    row-gap: 10px;
}

header .acronym{
    display: flex;
    font-size: clamp(14px, 5vw, 20px);
    align-items: center;
}

header nav{
    flex-wrap: wrap;
}

header nav a{
    font-size: clamp(8px, 3vw, 11px);
    padding: clamp(4px, 2vw, 8px);
}

.container{
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        'A'
        'B';
    align-items: start;
    margin: 0 0.5px 0.5px 0.5px;
}

.container-A{
    grid-area: A;
    display: flex;
    flex-direction: column;
    height: auto;
    border-right: solid 3px black;
    justify-content: center;
    font-size: clamp(3.5rem, 8vw, 6rem);
}

.copyright{
    margin-top: 3rem;
    padding-bottom: 1rem;
}

.container-B{
    grid-area: B;
    display: grid;
    grid-template-rows: repeat(4, auto);
    height: auto;
    overflow-y: visible;
}

}