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

html {
    background-color: #000;
    color: #ffffff;
    font-family: 'Lato', 'Arial', sans-serif;
    font-weight: 400;
    font-size: 20px;
    text-rendering: optimizeLegibility;
}

.row {
    max-width: 1440px;
    margin: 0 auto;
}

/* Font */

/* @font-face {
    font-family: 'Excalifont';
    src: url('vendors/fonts/Virgil.woff2') format('woff2'); 
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Excalifont', sans-serif;
} */

/* Reusable Styles */
ul{
    list-style-type: none;
}

h1 {
    margin: 0;
    color: #fff;
    font-size: 300%;
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: 5px;
}

h2, h3 {

    color: #fff;
    letter-spacing: 1px;
    word-spacing: 4px;
}

h2 {
    font-size: 200%;
}

h3 {
    font-size: 100%;
}

.w100{
    font-weight: 100;
}

.w200{
    font-weight: 200;
}

.w300{
    font-weight: 300;
}

.underline{
    text-decoration: underline;
}

h4 {

    color: #fff;
    font-size: 70%;
}

p {

    color: #fff;
    font-size: 50%;
}

.social_media {
    display: flex;
    float: right;
    list-style: none;
}

.btn_toggle {
    display: flex;
    list-style: none;
}

/* Main Page Styles */

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure wrapper takes full height of the viewport */
}

.main {
    flex: 1; /* Allows the main content to grow and take available space */
}

.header {
    display: flex;
    align-items: center;
}

.main_heading {
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: left;
}

.events{
    margin-top: 30vh;
}

.footer {
    margin-bottom: 50px;
    display: grid;
    align-items: center;
}

.footer_mail{
    display: flex;
    align-items: center;
}

.footer_link{
    text-decoration:none;
    border-bottom: solid 1px;
    border-color: rgb(255, 255, 255);
}

.centretext{
    text-align: center;
    margin-top: 30vh;
    vertical-align: middle;
}

.centre{
    text-align: center;
    vertical-align: middle;
}

/* Buttons Styles */

.btn:link,
.btn:visited {
    display: inline-block;
    padding: 10px 30px;
    font-weight: 300;
    text-decoration: none;
    border-radius: 200px;
    transition: background-color 0.2s, color 0.2s, border 0.2s;
}

.btn_icon:link,
.btn_icon:visited {
    font-size: 130%;
    border: 1px solid rgba(0, 0, 0, 0);
    color: #fff;
}

.btn_icon:hover,
.btn_icon:active {
    background-color: #fff;
    border: 1px solid #fff;
    color: #000;
}

.big_btn:link,
.big_btn:visited{
    display: inline-block;
    padding: 10px 40px;
    font-weight: 300;
    text-decoration: none;
    border-radius: 200px;
    border-color: #fff;
    transition: background-color 0.2s, color 0.2s, border 0.2s;
}

.btn_outline:link,
.btn_outline:visited{
    display: inline-block;
    padding: 10px 30px;
    font-weight: 300;
    text-decoration: none;
    border-radius: 200px;
    transition: background-color 0.2s, color 0.2s, border 0.2s;
    border: 1px solid;
    border-color: #fff;
}

.buton_in_text{
    /* display:grid; */
    padding: 10px 50px;
    display: flex;
    list-style: none;
    text-align: center;
}

.disp_grid{
    display: grid;
}

.make_big{
    font-size: 200%;
}

.spacing{
    padding: 0px 30px;
}

.arrow-container {
    position: relative;
}

.arrow_res {
    position: absolute;
    width: 225px;
    height: 175px;
    top: 70px; /* Adjust position as needed */
    /* left: -25px; */
    transform: translateX(-15%);
    background-image: url('resume3.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.arrow_git {
    position: absolute;
    width: 250px;
    height: 170px;
    top: 70px; /* Adjust position as needed */
    left: 28%;
    /* transform: translateX(-50%); */
    background-image: url('github2.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.arrow_link {
    position: absolute;
    width: 250px;
    height: 125px;
    top: 70px; /* Adjust position as needed */
    /* left: 20px; */
    transform: translateX(40%);
    background-image: url('linkedin2.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.arrow_work {
    position: absolute;
    width: 145px;
    height: 90px;
    top: -75px; /* Adjust position as needed */
    /* left: -20px; */
    transform: translateX(-45%);
    background-image: url('projects.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

/* Responsive Styles */

@media only screen and (max-width: 1200px) {
    .event_list {
        grid-template-columns: 1fr;
    }

    .row {
        max-width:85vw;
        margin: 0 auto;
    }

    .social_media {
        float: none;
        text-align: center;
    }

    .main_heading {
        text-align: center;
    }

    .btn {
        display: block;
        margin: 0 auto;
    }

    h1 {
        margin: 0;
        color: #fff;
        font-size: 300%;
        font-weight: 200;
        text-transform: uppercase;
        letter-spacing: 1px;
        word-spacing: 5px;
    }

    h2, h3 {
        font-weight: 300;
        letter-spacing: 1px;
        word-spacing: 4px;
    }
    
    h2 {
        font-size: 200%;
    }
    
    h3 {
        font-size: 100%;
    }
    
    h4 {
        font-size: 70%;
    }
    
    p {
        font-size: 50%;
    }
}