/* CSS files add styling rules to your content */

p,
h1,
h2,
h3,
h4,
span {
    font-family: "Barlow";
    font-weight: 300;
}

body.dark-mode {
    background-color: #000;
    color: #fff;
}

body.light-mode {
    background-color: #fff;
    color: #000;
}

body {
    scroll-behavior: smooth;
    background-color: #fff;
    color: #000;
}

a {
    text-decoration: none;
}

.switch {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 4%;
    right: 2%;
}

.st {
    font-weight: 300;
}

.st:hover {
    font-weight: 700;
}

.link {
    font-weight: 700;
    color: #00aacc;
}

.link:hover {
    padding-left: 5px;
    padding-right: 5px;
    color: yellow;
    background-color: #FF0077;
    font-weight: 700;
}

.link1 {
    font-weight: 700;
}

.link1:hover {
    padding-left: 5px;
    padding-right: 5px;
    color: white;
    background-color: #c40000;
}

#cal1:hover #cal2:after {
    content: "Callum Groeger";
    font-weight: 500;
}

#cal1:hover #cal2:before {
    content: "";
    font-weight: 500;
}

#cal2:before {
    content: "Callum";
    font-weight: 500;
}

#before404:hover #outer404:after {
    content: "Wrong Way Down a One Way Street";
    font-weight: 500;
}

#before404:hover #outer404:before {
    content: "";
    font-weight: 500;
}

#outer404:before {
    content: "Error 404";
    font-weight: 500;
}

.eumhc:hover:after {
    white-space: pre-wrap;
    content: '\A #5ForThe5s \A';
    background-color: #35602C;
    color: #fff;
    font-weight: 500;
}

.walk:hover:after {
    white-space: pre-wrap;
    content: '\A Hadrian\'s Wall (2020) \A';
    background-color: #BB1E10;
    color: #fff;
    font-weight: 500;
    font-size: 3.5vw;
    line-height: 4vw;
}

.efc:hover:after {
    white-space: pre-wrap;
    content: 'Head of Information Technology';
    background-color: #2771b8;
    color: #ffffff;
}

.eumhcsoc:hover:after {
    white-space: pre-wrap;
    content: 'National League/BUCS Fixtures Secretary';
    background-color: #35602C;
    color: #ffffff;
}

.twentytwentyfour:hover:after {
    white-space: pre-wrap;
    content: ' #ClassOf2024* ';
    background-color: #041E42;
    color: #fff;
    font-weight: 700;
    padding-right: 5vw;
    color: #BB1E10;
}

.twentytwentyone:hover:after {
    content: ' (2021)';
    font-weight: 700;
}

.twentytwenty:hover:after {
    content: ' (2020)';
    font-weight: 700;
}

.twentynineteen:hover:after {
    content: ' (2019)';
    font-weight: 700;
}

.twentyeighteen:hover:after {
    content: ' (2018)';
    font-weight: 700;
}

.twentyeighteenBLACK {
    background-color: #fff;
}

.twentyeighteenBLACK:hover:after {
    content: ' (2018)';
    font-weight: 700;
    color: #000;
}

.dofegold:hover:after {
    white-space: pre-wrap;
    content: ' (2021) 🤞';
    background-color: #fffdee;
    color: #fff;
    font-weight: 700;
    padding-right: 5vw;
    color: #c4952d;
}

.cal:hover:before {
    content: '';
    font-weight: 500;
}

.cal:hover:after {
    content: '';
    font-weight: 500;
}

.all {
    position: absolute;
    bottom: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    right: 0em;
    left: 0em;
    margin-bottom: 2em;
}

.main {
    margin-right: 10%;
    margin-left: 10%;
}

.bigtext {
    font-size: 8vw;
}

.smalltext {
    font-size: 5vw;
    LINE-HEIGHT: 6vw;
    /* align = "justify"; */
    text-align: justify;
}

.smallishtext {
    font-size: 4vw;
    LINE-HEIGHT: 5vw;
    /* align="justify"; */
    text-align: justify;
}

.smallytext {
    font-size: 3.5vw;
    LINE-HEIGHT: 4.5vw;
    /* align="justify"; */
    text-align: justify;
}

.smallertext {
    font-size: 2.25vw;
    LINE-HEIGHT: 3.25vw;
    /* align="justify"; */
    text-align: justify;
}


/* Next & previous buttons */

.prev,
.next {
    position: absolute;
    font-family: "Barlow";
    font-weight: 300;
    font-size: 5vw;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    padding-left: 3%;
    padding-right: 3%;
    bottom: 0px;
}


/* Position the "next button" to the right */

.prev {
    position: absolute;
    left: 3%;
}

.next {
    position: absolute;
    right: 3%;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
    font-weight: 900;
}