#seamachine-link::before {
    visibility: visible;
}

#seamachine-link::after {
    visibility: visible;
}

.three-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    margin: 0px 0px 0px 0px;
    background-color:white;
    border: 10px solid white;
    border-bottom: 0px;
    box-shadow: 0px 0px;
    gap: 10px;
    align-items: start;
    align-content: start;
    padding: 5px 10px 5px 10px;
}

.three-grid a:hover{
    padding: 10px;

}
.three-grid a{
    box-shadow: 0px 0px;
    max-width: 200px;
}

.three-grid p{
    font-style: normal;
    margin: -2px 5px 0px 0px;
}

.three-grid p::after{
    visibility: hidden;
}

.three-grid a p::after{
    visibility: visible;
}

.three-grid a p{
    padding: 0px;
    font-style: italic;
    text-align: right;
}

.three-grid p:after{
    content: url(../img/icons/arrow-right1a.png);
}

.item-1{
    grid-area: 2 / 1 / span 1 / span 1;
    align-self: start;
}

.item-2{
    grid-area: 2 / 2 / span 1 / span 1;
    align-self: start;
}

.item-3{
    grid-area: 2 / 3 / span 1 / span 1;
    align-self: start;
}

.p-1{ 
    grid-area: 1 / 1 / span 1 / span 2;
}

.p-2{ 
    grid-area: 1 / 3 / span 1 / span 2;
}

.three-grid div{
    font-size: 14pt;
    padding: 10px;
    padding-bottom: 0px;
}

.four-grid p {
    margin-top: -29px;
    line-height: 2;
    padding-bottom: 0px;
}

#starter {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        padding-right: 20px;
        /*margin-right: -10px;*/
        gap: 20px;
}

#starter p{
line-height: 1.25;
/*margin-right: 30px;*/
}

em {
    font-style: italic;
    display: block;
    margin-bottom: -15px;
}

.em-title {
    font-style: normal;
    font-size: larger;
    margin-bottom: -23px;
}

.br-small {
    line-height: -10;
}

.icon-pages:before {
    background-image: url(../img/icons/pages1a.png); 
    display: inline-block; 
    margin-right: -5px; 
    background-size: 24px 15px;
    width: 24px; 
    height: 15px;
    content:"";}

.icon-time:before {
    background-image: url(../img/icons/time1a.png); 
    display: inline-block; 
    margin-right: -5px; 
    margin-top: 1px;
    background-size: 24px 15px;
    width: 24px; 
    height: 15px;
    content:"";}

.icon-ages:before {
    background-image: url(../img/icons/age1a.png); 
    display: inline-block; 
    margin-right: -5px; 
    background-size: 24px 15px;
    width: 24px; 
    height: 15px;
    content:"";}

.icon-player:before {
    background-image: url(../img/icons/player1a.png); 
    display: inline-block; 
    margin-right: -3px; 
    background-size: 24px 15px;
    width: 24px; 
    height: 15px;
    content:"";}

.icon-format:before {
    background-image: url(../img/icons/cards1a.png); 
    display: inline-block; 
    margin-right: -0px; 
    background-size: 24px 15px;
    width: 24px; 
    height: 15px;
    content:"";}

.icon-language:before {
    background-image: url(../img/icons/language1a.png); 
    display: inline-block; 
    margin-right: -1px; 
    background-size: 24px 15px;
    width: 24px; 
    height: 15px;
    content:"";}

.rules-holder{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    gap: 40px;
    margin: 0px 20px 0px 20px;
}

.white-bg {
    padding-bottom: 60px;
}


.title-img-holder{
    padding: 0px 20px 0px 20px;
}

.title-img {
    background-image:url(../img/splash/sea-machine-splash1a.jpg) ;
    background-position: center center;
    background-size: cover;
    margin: auto;
    max-width: 1060px;
    height: 327px;
}

/*.border-img {
    border: 4px solid transparent;
    border-image: url(../img/borders/sea-machine-border1a.png) 4 repeat;
}*/

.p-inset{
    margin-bottom: 12px;
}

.section-holder img {
    border-radius: 15px;
    transform: scale(85%) rotate(-5deg) translate(30px);
    transition-duration: 0.2s;
    margin: -22px -20px -46px -31px;
    z-index: 0;
}

.anchor-btn {
    line-height: 1;
    font-size: 14pt;
    cursor: pointer;
    transition-duration: 0.2s;
    padding: 0px;
    background-color: transparent;
    color: black;
    text-transform: none;
    font-weight: normal;
    margin: 0px;
    width: fit-content;
    align-self: end;
}

.anchor-btn:hover {
    opacity: 50%;
}

.anchor-btn::after {
    content: url(../img/icons/arrow-bottomt1a.png);
    margin-left: 4px;
}


#popover-1 {position-anchor: --anchor-button1;}
#popover-2 {position-anchor: --anchor-button2;}
#popover-3 {position-anchor: --anchor-button3;}
#popover-4 {position-anchor: --anchor-button4;}
#popover-5 {position-anchor: --anchor-button5;}
#popover-6 {position-anchor: --anchor-button6;}
#popover-7 {position-anchor: --anchor-button7;}
#popover-8 {position-anchor: --anchor-button8;}
#popover-9 {position-anchor: --anchor-button9;}
#popover-10 {position-anchor: --anchor-button10;}
#popover-11 {position-anchor: --anchor-button11;}
#popover-12 {position-anchor: --anchor-button12;}
#popover-13 {position-anchor: --anchor-button13;}
#popover-14 {position-anchor: --anchor-button14;}
#popover-15 {position-anchor: --anchor-button15;}
#popover-16 {position-anchor: --anchor-button16;}
#popover-17 {position-anchor: --anchor-button17;}
#popover-18 {position-anchor: --anchor-button18;}
#popover-19 {position-anchor: --anchor-button19;}
#popover-20 {position-anchor: --anchor-button20;}
#popover-21 {position-anchor: --anchor-button21;}
#popover-22 {position-anchor: --anchor-button22;}
#popover-23 {position-anchor: --anchor-button23;}
#popover-24 {position-anchor: --anchor-button24;}
#popover-25 {position-anchor: --anchor-button25;}
#popover-26 {position-anchor: --anchor-button26;}
#popover-27 {position-anchor: --anchor-button27;}
#popover-28 {position-anchor: --anchor-button28;}
#popover-29 {position-anchor: --anchor-button29;}
#popover-30 {position-anchor: --anchor-button30;}
#popover-31 {position-anchor: --anchor-button31;}
#popover-32 {position-anchor: --anchor-button32;}
#popover-33 {position-anchor: --anchor-button33;}
#popover-34 {position-anchor: --anchor-button34;}
#popover-35 {position-anchor: --anchor-button35;}
#popover-36 {position-anchor: --anchor-button36;}
#popover-37 {position-anchor: --anchor-button37;}
#popover-38 {position-anchor: --anchor-button38;}
#popover-39 {position-anchor: --anchor-button39;}
#popover-40 {position-anchor: --anchor-button40;}
#popover-41 {position-anchor: --anchor-button41;}
#popover-42 {position-anchor: --anchor-button42;}
#popover-43 {position-anchor: --anchor-button43;}
#popover-44 {position-anchor: --anchor-button44;}
#popover-45 {position-anchor: --anchor-button45;}
#popover-46 {position-anchor: --anchor-button46;}
#popover-47 {position-anchor: --anchor-button47;}
#popover-48 {position-anchor: --anchor-button48;}
#popover-49 {position-anchor: --anchor-button49;}
#popover-50 {position-anchor: --anchor-button50;}
#popover-51 {position-anchor: --anchor-button51;}
#popover-52 {position-anchor: --anchor-button52;}
#popover-53 {position-anchor: --anchor-button53;}
#popover-54 {position-anchor: --anchor-button54;}
#popover-55 {position-anchor: --anchor-button55;}
#popover-56 {position-anchor: --anchor-button56;}
#popover-57 {position-anchor: --anchor-button57;}
#popover-58 {position-anchor: --anchor-button58;}
#popover-59 {position-anchor: --anchor-button59;}

#button-1 {anchor-name: --anchor-button1;}
#button-2 {anchor-name: --anchor-button2;}
#button-3 {anchor-name: --anchor-button3;}
#button-4 {anchor-name: --anchor-button4;}
#button-5 {anchor-name: --anchor-button5;}
#button-6 {anchor-name: --anchor-button6;}
#button-7 {anchor-name: --anchor-button7;}
#button-8 {anchor-name: --anchor-button8;}
#button-9 {anchor-name: --anchor-button9;}
#button-10 {anchor-name: --anchor-button10;}
#button-11 {anchor-name: --anchor-button11;}
#button-12 {anchor-name: --anchor-button12;}
#button-13 {anchor-name: --anchor-button13;}
#button-14 {anchor-name: --anchor-button14;}
#button-15 {anchor-name: --anchor-button15;}
#button-16 {anchor-name: --anchor-button16;}
#button-17 {anchor-name: --anchor-button17;}
#button-18 {anchor-name: --anchor-button18;}
#button-19 {anchor-name: --anchor-button19;}
#button-20 {anchor-name: --anchor-button20;}
#button-21 {anchor-name: --anchor-button21;}
#button-22 {anchor-name: --anchor-button22;}
#button-23 {anchor-name: --anchor-button23;}
#button-24 {anchor-name: --anchor-button24;}
#button-25 {anchor-name: --anchor-button25;}
#button-26 {anchor-name: --anchor-button26;}
#button-27 {anchor-name: --anchor-button27;}
#button-28 {anchor-name: --anchor-button28;}
#button-29 {anchor-name: --anchor-button29;}
#button-30 {anchor-name: --anchor-button30;}
#button-31 {anchor-name: --anchor-button31;}
#button-32 {anchor-name: --anchor-button32;}
#button-33 {anchor-name: --anchor-button33;}
#button-34 {anchor-name: --anchor-button34;}
#button-35 {anchor-name: --anchor-button35;}
#button-36 {anchor-name: --anchor-button36;}
#button-37 {anchor-name: --anchor-button37;}
#button-38 {anchor-name: --anchor-button38;}
#button-39 {anchor-name: --anchor-button39;}
#button-40 {anchor-name: --anchor-button40;}
#button-41 {anchor-name: --anchor-button41;}
#button-42 {anchor-name: --anchor-button42;}
#button-43 {anchor-name: --anchor-button43;}
#button-44 {anchor-name: --anchor-button44;}
#button-45 {anchor-name: --anchor-button45;}
#button-46 {anchor-name: --anchor-button46;}
#button-47 {anchor-name: --anchor-button47;}
#button-48 {anchor-name: --anchor-button48;}
#button-49 {anchor-name: --anchor-button49;}
#button-50 {anchor-name: --anchor-button50;}
#button-51 {anchor-name: --anchor-button51;}
#button-52 {anchor-name: --anchor-button52;}
#button-53 {anchor-name: --anchor-button53;}
#button-54 {anchor-name: --anchor-button54;}
#button-55 {anchor-name: --anchor-button55;}
#button-56 {anchor-name: --anchor-button56;}
#button-57 {anchor-name: --anchor-button57;}
#button-58 {anchor-name: --anchor-button58;}
#button-59 {anchor-name: --anchor-button59;}

.popover-card {
    width: 180px;

position-area: bottom span-right;
    margin-top: 5px;
    border-radius: 13px;
    pointer-events: none;
}

#popover-img-1 {background-image: url(../img/splash/sea-machine-game1a.jpg);}
#popover-img-2 {background-image: url(../img/splash/sea-machine-game2a.jpg);}
#popover-img-3 {background-image: url(../img/splash/sea-machine-game3a.jpg);}

#splash-1 {background-image: url(../img/splash/sea-machine-game1a.jpg);}
#splash-2 {background-image: url(../img/splash/sea-machine-game2a.jpg);}
#splash-3 {background-image: url(../img/splash/sea-machine-game3a.jpg);}

button:hover {
    opacity: 100%;
}

.difficulty-em {
    font-style: normal;
    margin-bottom: -30px;
}

#difficulty-1::after {
    content: url(../img/icons/red-marker1a.png);
    display: inline-block;
    transform: translateY(1px)
}

#difficulty-2::after {
    content: url(../img/icons/red-marker2a.png);
    display: inline-block;
    transform: translateY(1px)
}

#difficulty-3::after {
    content: url(../img/icons/red-marker3a.png);
    display: inline-block;
    transform: translateY(1px)
}


@media (max-width: 834px) {
  #starter {grid-template-columns: 1fr 1fr 1fr;}
.three-grid {grid-template-columns: 1fr 1fr; justify-items: start;}
.p-1{grid-area: 1 / 1 / span 2 / span 1; display: none;}
.item-1{grid-area: 2 / 1 / span 1 / span 1; margin-bottom: -10px;}
.item-2{grid-area: 2 / 2 / span 1 / span 1; margin-bottom: -10px;}
.p-2{grid-area: 3 / 1 / span 2 / span 1 ; display: none;}
.item-3{grid-area: 4 / 1 / span 1 / span 1; margin-bottom: -10px;}
.title-img{height: 250px; background-size: cover;}
}

@media (max-width: 660px) {
#nav-spacer {justify-content: center; margin-left:-10px; margin-right:-10px;}
.nav-link {margin-left: 10px; margin-right: 10px;}

.rules-holder {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    gap: 0px;}
  #starter {grid-template-columns: 1fr 1fr;}
}

@media (max-width: 600px) {
  .one-grid a {height: 200px;}
  #starter {grid-template-columns: 1fr 1fr;}
}