:root{
    --primary-color: #282c34;
    --accent-color: #E08645;
    --link-color: #9A2D26;
}


br{
    margin-bottom: 15px;
}


/* The logo at the top of the page */
.logo{
    width: 200px;
    height: 200px;
    border-radius: 100%;
    border: var(--accent-color);
    border-width: 5px;
    border-style: solid;
}


/* Style the navigation */
.nav{
    position: fixed;
    width: 100%;
}
.nav ul{
    position: inherit;
    text-align: right;
    display: flex;
    transition: flex-direction, bottom, right, transform;
    transition-duration: 0.35s;
}
.nav li{
    margin: 10px;
    margin-bottom: 20px;
}
.nav a{
    color: white;
    transition: color 0.2s ease;
}
.nav a:hover{
    color: var(--link-color);
    transition: color 0.2s ease;
}

.toSide {
    flex-direction: column;
    bottom: 50%;
    right: 0;
    transform: translate(0, 50%);
}
.toBottom {
    flex-direction: row;
    bottom: 0;
    right: 50%;
    transform: translate(50%, 0);
}


/* For text fields */
.infoContainer{
    display: flex;
    width: 90%;
}

.textSpace{
    word-spacing: 6px;
    line-height: 30px;
    padding-right: 30px;
    width: 100%;
}

.line{
    border: white solid 1px;
    margin: 20px 0px;
    width: 90%;
}


/*This section is used to change the fonts */
.titleFont{
    font-size: xx-large;
}

.italicFont{
    font-style: italic;
}

.alignTextCenter{
    text-align: center;
}

.boldFont{
    font-weight: bold;
}


/* For the different sections of the website */
.section {
    width: 100%;
    min-height: 100vh;
}


/*This section has all the padding and margins for different types of objects*/
.centerContent{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.margin20{
    margin: 20px;
}

.padding20{
    padding: 20px;
}

.padding20Top{
    padding-top: 20px;
}

.passing30Right{
    padding-right: 30px;
}


/*This section has all the class colours that will be used in the website*/
.mainColor{
    color: var(--primary-color);
}
.mainColorBG{
    color: #fff;
    background-color: var(--primary-color);
}

.accentColor{
    color: var(--accent-color);
}
.accentColorBG{
    color: #fff;
    background-color: var(--accent-color);
}

.linkColor{
    color: var(--link-color);
    text-decoration-line: underline;
}


/*Debug section*/
.db{
    border: red;
    border-style: dashed;
}