media.css

@import url('https://fonts.googleapis.com/css?family=Krona+One&display=swap');
@import url('https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap');
:root {
    --background-colour: #E62A2E;
    --title-font: 'Krona One';
    --text-font: 'Kosugi Maru';
}
.square {
    background-color: var(--background-colour);
    position: absolute;
    height: 40vh;
    padding:0;
    margin:0;
    top:0%;
    left:0;
    width: 100%;
}
    
.logo {
    position: absolute;
    top:0%;
    left: 2%;
}
.scientificLink {
    font-family: var(--text-font), sans-serif;
    color: white;
    font-weight: 120;
    font-size: 1vw;
    background-color: transparent;
    border-color: transparent;
    position: absolute;
    top: 1%;
    left: 73%;
    display: inline-block;
}

.scientificLink:hover {
    text-underline-offset: 0.4em;
    text-decoration: underline;
    font-family: var(--text-font), sans-serif;
    background-color: transparent;
    border-color: transparent;

}
.mediaLink {
    font-family: var(--text-font), sans-serif;
    color: white;
    font-weight: 120;
    font-size: 1vw;
    background-color: transparent;
    border-color: transparent;
    position: absolute;
    top: 1%;
    left: 94%;
}

.mediaLink:hover {
    font-family: var(--text-font), sans-serif;
    text-underline-offset: 0.4em;
    text-decoration: underline;
    background-color: transparent;
    border-color: transparent ;
}

.title {
    font-family: var(--title-font), sans-serif;
    color: white;
    font-weight: 120;
    font-size: 4vw;
    text-align:center;
    width: 70%;
    position: absolute;
    top: 25%;
    left: 15%;
}

.videoholder{
    display:inline-block;
    margin-top:20%;
    text-align:center;
    width:100%;
}
.videonextline{
  

    display:inline-block;
  
    text-align:center;
    width:100%
}

.videolastline{
    display:inline-block;
  
    text-align:center;
    width:100%
}