html {
    scroll-behavior: smooth;
}

/*
style of the whole webside
*/
body {
    /*
    change to a background-image
    */
    /*
    background: rgb(134,166,209);
    background: linear-gradient(180deg, rgba(134,166,209,1) 0%, rgba(186,221,230,1) 27%, rgba(181,200,228,1) 74%, rgba(168,162,219,1) 100%);
    */
    background: rgb(134, 166, 209);
    background: linear-gradient(180deg, rgba(134, 166, 209, 1) 0%, rgba(186, 221, 230, 1) 27%, rgba(181, 200, 228, 1) 74%, rgba(168, 162, 219, 1) 100%);
    
    opacity: 0.8;

    /*
    scaleable edge of the whole webside
    */
    margin: 3.14% 10%;

    /*
    usage of a specific font (to change!) and style
    if not specified in other elements all texts and images are centered
    */
    font-family: 'Titillium Web', sans-serif;
    text-shadow: 2px 2px 10px rgba(226, 226, 226, 0.829);
    text-align: center;


    /*
    fine-tuning the font
    */
    letter-spacing: 3px;
    line-height: 1.4;

    font-size: 100%;
}

/*
determines border and outline for all divs
*/
.introduction, .avatar, .video, .guildboard, .specialWin, .headline {

    border-radius: 5px;
    border-width: 0px;

    border-style: solid;
    border-width: 8px;
    outline-color: black;
    /*outline-offset: 2px;*/

    margin: 14px 5px;
    padding: 20px 50px;

    overflow-x: auto;

    background: rgb(238, 218, 174);
    background: radial-gradient(circle, rgb(241, 220, 166) 0%, rgb(228, 186, 108) 100%);
}

.headline {
    background: rgb(228, 199, 128);
    background: radial-gradient(circle, rgb(238, 203, 115) 0%, rgb(214, 161, 61) 100%);
}

.specialWin {
    background: rgb(223, 215, 174);
}

.box {
    float: left;
}

.boxR {
    float: right;
}


/*
for h1, p, th, td the size is at least 10px
the vw is the responsive size if you change the size of the browser window
*/
h1 {
    font-size: calc(10px + 3vw);
    margin: 1%;
    text-align: center;
}

h3 {
    font-size: calc(10px + 1.75vw);
    margin: 1%;
    text-align: center;
}

p, th, td {
    font-size: calc(9px + 0.75vw);
}

th, td {
    padding: 1%;
}

table {
    width: 100%;
}


/* determine the color of a link
/* unvisited link */
a:link {
    color: rgb(98, 144, 204)
}

/* visited link */
a:visited {
    color: rgb(98, 144, 204)
}

/* mouse over link */
a:hover {
    color: blue;
}

/* selected link */
a:active {
    color: blue;
    text-shadow: 0 0 5px black;
}


/*
special classes to turn text left or right
*/

.goRight {
    text-align: right;
}

.goLeft {
    text-align: left;
}

/*
specialized for the ytube-video
*/

#videofilm {
    padding: 5%;
}

#tutorialContainer {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}

#tutorial {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    
    -webkit-box-shadow: 0px 3px 17px 10px rgba(0,0,0,0.8);
    box-shadow: 0px 3px 17px 10px rgba(0,0,0,0.8);
}