Portfolio/public/portfolio/view/stylesheets/style.css

@media screen and (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}
@media (orientation: landscape) {
    #intro{
        min-height: 100vh;
        background: rgb(59,86,166);
        background: linear-gradient(139deg, rgba(59,86,166,1) 0%, rgba(169,60,81,1) 29%, rgba(59,86,166,1) 64%);
        background-size: auto 100%;
        background-repeat: no-repeat;
        color: rgb(255, 255, 255);
        font-family: 'Montserrat', sans-serif;
    }
    .profile{
        margin-top: 30vh;
        height: 70vh;
    }
    .triangle
    {
        bottom: 0;
        right: 0;
        width: 0;
        height: 0;
        border-bottom: 5vw solid rgba(136, 136, 136, 0.747);
        border-left: 5vw solid transparent;
        margin: 0%;
    }
    .floatingwarning{
        position: fixed;
        padding: 2%;
        bottom: 10%;
        left: 10%;
        z-index: 2;
        background-color: rgba(0, 0, 0, 0.68);
        color: white;
        font-size: 1.5em;
        width: 40%;
    }
}
@media (orientation: portrait) {
    #intro{
        min-height: 100vh;
        background: rgb(59,86,166);
        background: linear-gradient(139deg, rgba(59,86,166,1) 0%, rgba(169,60,81,1) 29%, rgba(59,86,166,1) 64%);
        background-size: 100% auto;
        background-repeat: no-repeat;
        color: rgb(255, 255, 255);
        font-family: 'Montserrat', sans-serif;
    }
    .profile{
        display: none;
    }
    .triangle
    {
        bottom: 0;
        right: 0;
        width: 0;
        height: 0;
        border-bottom: 20vw solid rgba(136, 136, 136, 0.747);
        border-left: 20vw solid transparent;
        margin: 0%;
    }
    .floatingwarning{
        position: fixed;
        padding: 1%;
        bottom: 2%;
        left: 2%;
        z-index: 2;
        background-color: rgba(0, 0, 0, 0.68);
        color: white;
        font-size: 1.125em;
        width: 60%;
    }
}

#floatingmenu{
    position: fixed;
    z-index: 2;
    bottom: 0;
    right: 0;
}

#intro p{
    line-height: 1.5;
}
.jumpto{
    font-weight: bold;
    /*background-color: rgba(255, 255, 255, 0.171);
    border: 1px solid #4d4d4d;
    border-radius: 10px;
    box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
    */
    box-sizing: border-box;
    color: #fdfdfd;
    cursor: pointer;
    display: inline-block;
    font-family: "Montserrat",sans-serif;
    font-size: 100%;
    margin: 4 px;
    padding: 5px;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
}
.jumpto:hover {
    background-color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}
.jumpto img{
    width: 3vw;
}
#intro h1{
    font-size: 230%;
    padding-top:  15%;
    padding-bottom: 2%;
}
#intro_text{
    font-size: 120%;
    padding-right: 2%;
    padding-bottom: 3%;
}
#education .white_text{
    margin-top: 7%;
    margin-bottom: 6%;
}
.white_text{
    font-family: 'Mulish', sans-serif;
    padding: 4% 2% 4% 2%;
    font-size: 120%;
}
#certification .white_text{
    padding: 10% 5% 10% 5%;
}
.white_text h2{
    font-size: 400%;
}
#experience{
    background: rgb(125,59,166);
    background: linear-gradient(30deg, rgba(125,59,166,1) 0%, rgba(59,86,166,1) 43%, rgba(125,59,166,1) 100%);
    color: white;
}
.colour_head{
    text-align: center;
    padding: 10% 0% 1% 0%;
    font-family: 'Montserrat', sans-serif;
    font-size: 370%;
}
#skills p{
    text-align: center;
    padding: 3% 0% 3% 0%;
    font-size: 200%;
    font-family: 'Montserrat', sans-serif;
}
#exp_text{
    padding: 3% 20% 3% 20%;
    line-height: 2;
    font-weight: 600;
    font-family: 'Montserrat', serif;
}
.binner{
    color: rgb(0, 0, 0);
    padding: 6% 3% 6% 3%;
    font-size: 110%;
    line-height: 2;
    font-family: 'Montserrat', sans-serif;
    border-radius: 3%;
    margin: 3%;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 20px 20px rgba(0, 0, 0, 0.288);
}
#skills{
    background: rgb(59,156,166);
    background: linear-gradient(30deg, rgba(59,156,166,1) 0%, rgba(59,86,166,1) 61%, rgba(59,156,166,1) 100%);
    color: rgb(255, 255, 255);
}
.skillico{
    width: 100%;
    padding: 20%;
}
#minorskills{
    padding: 0% auto;
    margin-left: 5%;
    margin-bottom: 10%;
}
.smallcont{
    display: inline-block;
    margin: 1%;
    padding: 2%;
    color: rgb(0, 0, 0);
    font-size: 130%;
    font-family: 'Montserrat', sans-serif;
    border-radius: 3%;
    background-color: rgba(255, 255, 255, 0.459);
    box-shadow: 5px 10px rgba(0, 0, 0, 0.432);
}
.smallhead{
    padding-top: 4% !important;
}
.languages .binner{
    padding: 8% 20% 8% 20%;
}
#projects{
    text-align: center;
}
.project{
    margin-top: 4%;
    margin-bottom: 4%;
    padding: 1%;
}
.project h1{
    padding: 3% 0% 3% 0%;
    font-size: 350%;
}
.imgproject{
    width: 100%;
    padding-bottom: 5%;
}
.projecttext{
    font-size: 100%;
    text-align:justify;
}
.totop{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40%;
    padding: 0%;
    opacity: 10%;
}
.triangle:hover .totop{
    opacity: 100%;
}
.date{
    font-style: italic;
    float: right;
    font-size: 80%;
}