body {
    font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;
}

.title {
    left:10%;
    position:center;
    font-size:36pt;
    margin:20px;
}

.subtitle {
    position:center;
    font-size:28pt;
    margin:20px;
}

.brief {
    margin:20px;
    font-size:28pt;
    font-style:italic;
}

.brief p, ul {
    font-size:16pt;
    font-style:none;
}

.brief img {
    float:right;
}

.button {
    width: 200px;
    height: 50px;
    border-radius:10px;
    text-align:center;
    position:center;
    background-color: rgba(180,180,180,.7);
    font-size:24pt;
    margin:20px;
    margin-left:150px;
}

.circle {
    border-radius: 50%;
    width: 25px;
    height: 25px; 
    background-color:red;
    position:fixed;
}
.circle:hover {
    cursor:pointer;
    border: 1px solid yellow;
}
.label {
    color:black;
    position:fixed;
    font-weight:bold;
    margin-left:27px;
    background-color:rgba(200,200,200,.7);
    pointer-events:none;
    max-width:8em;
}

.notepad {
    position:fixed;
    right:0px;
    top:0px;
    width:300px;
    text-align:center;
    background-color:white;
}

.notepad textarea {
    height:30vh;
    width:94%;
    resize:vertical;
}

.notepad span {
    display:inline-block;
    height:25px;
    width:142px;
    border: 1px solid black;
}

.notepad span:hover {
    cursor:pointer;
}

.twine {
    width:calc(100vw - 305px);
    height:100vh;
    position:fixed;
    left:0px;
    top:0px;
}

#east, #eastl{
    top:225px;
    left:465px;
}
#ga, #gal {
    top:245px;
    left:440px;
}
#cali, #calil{
    top:220px;
    left:352px;
}
#euro, #eurol{
    top:200px;
    left:620px;
}
#japan, #japanl{
    top:225px;
    left:140px;
}
#argent, #argentl{
    top:400px;
    left:470px;
}
#sa, #sal{
    top:400px;
    left:678px;
}
#india, #indial{
    top:280px;
    left:5px;
}

.plane {
    position:fixed;
    top:215px;
    left:350px;
}